<template>
  <div class="inquiry-container">
    <!-- 标题 -->
    <h1 style="font-size: 24px;">我的询单</h1>

    <!-- 询单表格 -->
    <el-table
      :data="inquiries"
      style="width: 100%"
      border
      empty-text="暂无订单">
      <el-table-column prop="inquiryId" label="询单编号" width="120"></el-table-column>
      <el-table-column prop="productInfo" label="商品信息" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="estimatedQuantity" label="预估采购数量" width="120"></el-table-column>
      <el-table-column prop="description" label="需求描述" show-overflow-tooltip></el-table-column>
      <el-table-column prop="submitTime" label="询单提交时间" width="160"></el-table-column>
      <el-table-column prop="channel" label="询单渠道" width="120"></el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)" style="color: var(--color-base);">查看</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <!-- 无数据时的提示 -->
        <div
          style="text-align: center; margin-top: 20px; color: #999;"
        >
          <img
            src="https://img.yzcdn.cn/vant/empty-image-default.png"
            alt="No Data"
            style="width: 100px; height: 100px;"
          />
          <p style="height: 20px;margin: 0;">暂无订单</p>
          <el-link
            style="color: var(--color-base);height: 20px;"
            @click="handleAddInquiry"
          >立即询单</el-link
          >
        </div>
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalInquiries">
    </el-pagination>
  </div>
</template>

<script>

export default {
  data() {
    return {
      inquiries: [
        {
          inquiryId: 'INQ001',
          productInfo: '笔记本电脑',
          estimatedQuantity: 10,
          description: '高性能笔记本电脑，用于办公',
          submitTime: '2023-10-01 10:00',
          channel: '在线平台'
        },
        {
          inquiryId: 'INQ002',
          productInfo: '智能手机',
          estimatedQuantity: 20,
          description: '最新款智能手机，用于市场调研',
          submitTime: '2023-10-02 11:30',
          channel: '电话'
        },
        {
          inquiryId: 'INQ003',
          productInfo: '无线耳机',
          estimatedQuantity: 50,
          description: '高质量无线耳机，用于团队协作',
          submitTime: '2023-10-03 14:15',
          channel: '邮件'
        },
        {
          inquiryId: 'INQ004',
          productInfo: '智能手表',
          estimatedQuantity: 30,
          description: '智能手表，用于健康监测',
          submitTime: '2023-10-04 09:45',
          channel: '在线平台'
        },
        {
          inquiryId: 'INQ005',
          productInfo: '平板电脑',
          estimatedQuantity: 25,
          description: '平板电脑，用于学习',
          submitTime: '2023-10-05 10:15',
          channel: '电话'
        },
        {
          inquiryId: 'INQ006',
          productInfo: '智能音箱',
          estimatedQuantity: 40,
          description: '智能音箱，用于智能家居',
          submitTime: '2023-10-06 11:00',
          channel: '邮件'
        },
        {
          inquiryId: 'INQ007',
          productInfo: '无线鼠标',
          estimatedQuantity: 60,
          description: '无线鼠标，用于办公',
          submitTime: '2023-10-07 12:30',
          channel: '在线平台'
        },
        {
          inquiryId: 'INQ008',
          productInfo: '键盘',
          estimatedQuantity: 55,
          description: '键盘，用于办公',
          submitTime: '2023-10-08 13:45',
          channel: '电话'
        },
        {
          inquiryId: 'INQ009',
          productInfo: '显示器',
          estimatedQuantity: 45,
          description: '显示器，用于办公',
          submitTime: '2023-10-09 14:15',
          channel: '邮件'
        },
        {
          inquiryId: 'INQ010',
          productInfo: '摄像头',
          estimatedQuantity: 35,
          description: '摄像头，用于视频会议',
          submitTime: '2023-10-10 15:00',
          channel: '在线平台'
        },
      ],
      currentPage: 1,
      pageSize: 10,
      totalInquiries: 10,
    }
  },
  methods: {
    handleAddInquiry() {
      this.$router.push({ path: '/home/InquiryDetail'});
    },
    handleView(row) {
      let inquiryId = row ? row.inquiryId : null;
      this.$router.push({ path: '/home/InquiryDetail', query: { id: inquiryId, type: 'detail' } });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      // 这里预留数据请求接口
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      // 这里预留数据请求接口
    },
  }
}
</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.custom-link {
  text-decoration: underline; /* 添加下划线 */
  text-decoration-thickness: 2px; /* 设置下划线的厚度 */
  text-underline-offset: 4px; /* 设置下划线与文本的距离 */
}
</style>